import React, { Component } from 'react';
import styles from './Echarts.css'; 

import echarts from 'echarts';

const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span:16 },
  };

//图表
class Echarts extends Component {
  constructor(props){
    super(props);
    this.formRef = React.createRef();
    this.state={ 
         
    }
  } 
 
  initEcharts = ()=>{
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        tooltip: {
           trigger: 'axis',
           axisPointer: {
               type: 'shadow'
           }
       },
       grid:{
          left:"10%",
          right:"10%",
          top:"16%",
          bottom:"8%"
       },
        legend: {
           top: '1%', 
           textStyle: {
               color: '#C2C4C4'
           },
           data:["最高温度","最低温度","降雨"]
       },
       xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           axisLabel: {textStyle: {color: '#C2C4C4'}},
           axisLine: {show: true,lineStyle: {color: '#DCE2E8'}},
           axisTick: {show: false},
       },
      yAxis: [{
           name: '℃',
           type: 'value',
           axisTick: {show: false},
           axisLine: {show: true,lineStyle: {color: '#DCE2E8'}},
           axisLabel: {textStyle: {color: '#C2C4C4'}},
           splitLine: {
                lineStyle: { 
                    color: 'rgba(194,196,196,0.3)',
                    type:'dashed'
                }
            }
       }, {
           name: 'mm',
           type: 'value',
           position: 'right',
           axisTick: {show: false},
           axisLabel: {textStyle: {color: '#C2C4C4'},formatter: '{value}'},
           axisLine: {show: true,lineStyle: {color: '#DCE2E8'}},
           splitLine: {show: false}
       }],
       series: [{
           name:"最高温度",
           data: [220, 332, 401, 534, 420, 530, 320],
           type: 'line',
           smooth: true,
            yAxisIndex: 0,
            markPoint: { data: [{type: 'max', name: '最大值'}]},
            itemStyle: {
               normal: {
                   color:"#FF7301"
               }
             }
       },{
           name:"最低温度",
           data: [120, 232, 301, 334, 120, 130, 120],
           type: 'line',
           smooth: true,
            yAxisIndex: 0,
            markPoint: {data: [{type: 'min', name: '最小值'}]},
           itemStyle: {normal: { color:"#01FFFC" }}
       },{
           name:"降雨",
           type: 'bar',
           data: [500, 260, 130, 100, 120, 150],
           barWidth: '20%',
           yAxisIndex: 1,
           itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: 'rgba(0,244,255,1)' // 0% 处的颜色
                   }, {
                       offset: 1,
                       color: 'rgba(0,77,167,1)' // 100% 处的颜色
                   }], false),
                   barBorderRadius: [30, 30, 30, 30],
                   shadowColor: 'rgba(0,160,221,1)',
                   shadowBlur: 4,
               }
           },
       }]
   }; 
    myChart.setOption(option,true);
    
  
  }

  componentDidMount(){
      this.initEcharts();
         
  } 
  render() { 
    const {data,index} = this.state;
 
    return (
      <div id="main" className={styles.centerBox}>
           
      </div>
    );
  }
}

export default Echarts;
